import React from 'react';
import ReactDOM from 'react-dom/client';
import './msgBox.css';

const MsgBoxComponent = ({ title, content, onOk, onCancel, okText, cancelText }) => {
  return (
    <div className="msgbox-overlay" onClick={onCancel}>
      <div className="msgbox-content" onClick={(e) => e.stopPropagation()}>
        <div className="msgbox-header">
          <h3>{title}</h3>
        </div>
        <div className="msgbox-body">
          <p>{content}</p>
        </div>
        <div className="msgbox-footer">
          <button className="msgbox-button cancel-button" onClick={onCancel}>
            {cancelText}
          </button>
          <button className="msgbox-button ok-button" onClick={onOk}>
            {okText}
          </button>
        </div>
      </div>
    </div>
  );
};

/**
 * 自定义弹窗函数
 * @param {string} title - 弹窗标题
 * @param {string} content - 弹窗内容
 * @param {string} okText - 确认按钮文本（默认“确定”）
 * @param {string} cancelText - 取消按钮文本（默认“取消”）
 * @returns {Promise<boolean>} - 用户点击“确定”返回 true，点击“取消”返回 false
 */
const MsgBox = ({ title, content, okText = '确定', cancelText = '取消' }) => {
  return new Promise((resolve) => {
    // 创建一个容器来挂载弹窗
    const msgboxContainer = document.createElement('div');
    document.body.appendChild(msgboxContainer);

    // 使用 React 18 的 createRoot API
    const root = ReactDOM.createRoot(msgboxContainer);

    // 关闭弹窗并清理 DOM
    const closeMsgBox = (result) => {
      root.unmount(); // 卸载组件
      document.body.removeChild(msgboxContainer); // 移除容器
      resolve(result); // 返回用户选择的结果
    };

    // 渲染弹窗
    root.render(
      <MsgBoxComponent
        title={title}
        content={content}
        onOk={() => closeMsgBox(true)} // 用户点击“确定”
        onCancel={() => closeMsgBox(false)} // 用户点击“取消”
        okText={okText}
        cancelText={cancelText}
      />
    );
  });
};

export default MsgBox;